<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>home</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  
        <script src="js/responsiveslides.min.js"></script>
        <script>
            // You can also use "$(window).load(function() {"
            $(function() {
                // Slideshow 4
                $("#slider4").responsiveSlides({
                    auto: true,
                    pager: true,
                    nav: true,
                    speed: 500,
                    namespace: "callbacks",
                    before: function() {
                        $('.events').append("<li>before event fired.</li>");
                    },
                    after: function() {
                        $('.events').append("<li>after event fired.</li>");
                    }
                });

            });
        </script>
        <script type="text/javascript">

            jQuery(document).ready(function() {
                //
                jQuery('#da-slider').cslider({
                    autoplay: true,
                    bgincrement: 450
                });
                //
                $(".form").h5Validate({
                    errorClass: "validationError",
                    validClass: "validationValid"
                });

                // Prevent form submission when errors
                $(".form").submit(function(evt) {
                    if ($(".form").h5Validate("allValid") === false) {
                        evt.preventDefault();
                    }
                });
            });
        </script>			
    </head>
    <body>
        <section class="bg_back">
            <header class="top_Nav wrap clearfix">
                <ul class="Top_menu floatLeft">
                    <li><a href="#">Giới thiệu</a></li>
                    <li><a href="#">Liên hệ</a></li>
                </ul><!--End .Top_menu-->
                <ul class="user clearfix floatRight">
                    <li><a href="#">Đăng tin</a></li>
                    <li><a href="#">Đăng nhập</a>
                        <div class="detail-login">
                            <form class="form clearfix">
                                <div class="gmail">
                                    <input type="email" placeholder="Abc@gmail.com" required/>
                                </div>
                                <div class="password">
                                    <input type="password" placeholder="Mật Khẩu" required/>
                                </div>
                                <div class="send">
                                    <input type="submit" value="Đăng Nhập"/>
                                </div>
                            </form>
                        </div>
                    </li>
                    <li class="price_user">
                        <span>100000 VND</span>
                    </li>
                    <li>
                        <a href="#" class="headerTinymanPhoto">
                            <img src="uploads/1076505_100003738868761_2002716988_q.jpg" alt="user"/>
                            <span class="headerTinymanName">Hai Le</span>
                        </a>
                        <div class="detail_user">
                            <ul>
                                <li><h6 class="welcome"> Hai Le</h6></li>
                                <li><a href="">Profile</a></li>
                                <li><button id="logout">Đăng xuất</button></li> 
                            </ul>
                        </div>
                    </li>
                </ul>
            </header><!--End .top_Nav-->
        </section><!--End .bg_back-->

        <section class="logo_formSearch">
            <div class="wrap clearfix">
                <a href="#" id="logo" class="floatLeft"><img src="uploads/logo.png" alt=""/></a>
                <form id="search" >
                    <input type="text" placeholder="search" class="txt-search"/>
                    <input type="button" id="btnSearch" class="btnsearch"/>
                </form>
                <section class="cart">
                    <a class="icon_cart"></a>
                    <span>0</span>

                </section>
            </div>
        </section><!--End .logo_formSearch-->
<style>
    #nav{
        background: aliceblue;
        margin-bottom: 20px;
        height: 50px;
        width: 100%;
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
    }
    #droppdown > ul > li
    {
        float: left;
        padding: 14px;
        position: relative
    }
    #droppdown > ul > li > a
    {
        font-weight: bold;
    }
    #droppdown > ul > li:hover > ul
    {
        display: block;
    }
    #droppdown > ul > li > ul
    {
        box-shadow: 0px 1px 5px #999999;
        width: 620px;
        background: #fff;
        position: absolute;
        z-index: 3;
        padding: 10px;
        margin-top: 13px;
        border: 1px solid #e3e3e3;
        display: none
    }
    #droppdown > ul > li > ul > li
    {
        float: left;
        margin-right: 55px;
        margin-bottom: 20px;
    }

    #droppdown > ul > li > ul > li > a
    {
        color: rgb(75, 63, 138);
        font-weight: bold;
    }

    #droppdown > ul > li > ul  li  ul  li
    {
        border-bottom: 1px solid #e3e3e3;
        padding: 8px 9px
    }

    #droppdown > ul > li > ul li ul li:hover
    {
        background: #ffcc99;
    }
</style>
        <div id="nav">
            <div class="center" id="droppdown">
                <ul>
                    <li><a>Home</a></li>
                    <li><a >About</a></li>
                    <li><a href="">Featured phone <span> (12)</span></a></li>
                    <li><a href="" >Smart phone</a>
                        <ul>
                            <li ><a href="" >Main stream</a>
                                <ul >
                                    <li><a href="">iOS</a></li>
                                    <li><a href="">Android</a></li>
                                    <li><a href="">others</a></li>
                                </ul>
                            </li>
                            <li ><a href="" >Luxury</a>
                                <ul >
                                    <li><a href="">iOS</a></li>
                                    <li><a href="">Android</a></li>
                                    <li><a href="">others</a></li>
                                </ul>
                            </li>
                            <li ><a href="" >Sales</a>
                                <ul >
                                    <li><a href="">iOS</a></li>
                                    <li><a href="">Android</a></li>
                                    <li><a href="">others</a></li>
                                </ul>
                            </li>
                        </ul> <!-- drop -->
                    </li>
                </ul>  <!-- menu level 1 -->
            </div>
        </div> <!--End navigation-->
        <div id="bg-slideshow">
            <div class="callbacks_container">
                <ul class="rslides" id="slider4">
                    <li>
                        <img src="images/1.jpg" alt="">

                    </li>
                    <li>
                        <img src="images/2.jpg" alt="">

                    </li>
                    <li>
                        <img src="images/3.jpg" alt="">

                    </li>
                        <li>
                        <img src="images/4.jpg" alt="">

                    </li>
                </ul>
            </div>  
        </div>   

        <section id="content" class="wrap_2">
            <header class="Nav_content">
                <a href="#">All (200)</a>
                <a href="#">man (20)</a>
                <a href="#">woman (21)  </a>
                <a href="#">kids (11) </a>
                <a href="#">fashion (12) </a>
                <a href="#">new (10) </a>
                <a href="#">sale (10) </a>
            </header><!--End .Nav_content-->
            <div id="content_index">
                <section class="module">
                    <div class="module_item clearfix">
                        <a href="#" class="img_module">
                            <img src="uploads/product_3.png" alt="000"/>
                        </a>
                        <div class="reduced">
                            <header class="title_item"><a href="#">Sample Fashion ProductA Configurable product offers</a></header>
                            <p> which are selected from drop-down lists...</p>
                        </div><!--End .reduced-->
                        <a href="#" class="btn_readmore">Chi tiết</a>
                        <span class="price">200K</span>
                    </div><!--End .module_item-->
                </section><!--End .module-->

                <section class="module">
                    <div class="module_item clearfix">
                        <a href="#" class="img_module">
                            <img src="uploads/product_3.png" alt="000"/>
                        </a>
                        <div class="reduced">
                            <header class="title_item"><a href="#">Sample Fashion ProductA Configurable product offers</a></header>
                            <p> which are selected from drop-down lists...</p>
                        </div><!--End .reduced-->
                        <a href="#" class="btn_readmore">Chi tiết</a>
                        <span class="price">200K</span>
                    </div><!--End .module_item-->
                </section><!--End .module-->

                <section class="module">
                    <div class="module_item clearfix">
                        <a href="#" class="img_module">
                            <img src="uploads/product_3.png" alt="000"/>
                        </a>
                        <div class="reduced">
                            <header class="title_item"><a href="#">Sample Fashion ProductA Configurable product offers</a></header>
                            <p> which are selected from drop-down lists...</p>
                        </div><!--End .reduced-->
                        <a href="#" class="btn_readmore">Chi tiết</a>
                        <span class="price">200K</span>
                    </div><!--End .module_item-->
                </section><!--End .module-->

                <section class="module">
                    <div class="module_item clearfix">
                        <a href="#" class="img_module">
                            <img src="uploads/product_3.png" alt="000"/>
                        </a>
                        <div class="reduced">
                            <header class="title_item"><a href="#">Sample Fashion ProductA Configurable product offers</a></header>
                            <p> which are selected from drop-down lists...</p>
                        </div><!--End .reduced-->
                        <a href="#" class="btn_readmore">Chi tiết</a>
                        <span class="price">200K</span>
                    </div><!--End .module_item-->
                </section><!--End .module-->

                <section class="module">
                    <div class="module_item clearfix">
                        <a href="#" class="img_module">
                            <img src="uploads/product_3.png" alt="000"/>
                        </a>
                        <div class="reduced">
                            <header class="title_item"><a href="#">Sample Fashion ProductA Configurable product offers</a></header>
                            <p> which are selected from drop-down lists...</p>
                        </div><!--End .reduced-->
                        <a href="#" class="btn_readmore">Chi tiết</a>
                        <span class="price">200K</span>
                    </div><!--End .module_item-->
                </section><!--End .module-->

                <section class="module">
                    <div class="module_item clearfix">
                        <a href="#" class="img_module">
                            <img src="uploads/product_3.png" alt="000"/>
                        </a>
                        <div class="reduced">
                            <header class="title_item"><a href="#">Sample Fashion ProductA Configurable product offers</a></header>
                            <p> which are selected from drop-down lists...</p>
                        </div><!--End .reduced-->
                        <a href="#" class="btn_readmore">Chi tiết</a>
                        <span class="price">200K</span>
                    </div><!--End .module_item-->
                </section><!--End .module-->

                <section class="module">
                    <div class="module_item clearfix">
                        <a href="#" class="img_module">
                            <img src="uploads/product_3.png" alt="000"/>
                        </a>
                        <div class="reduced">
                            <header class="title_item"><a href="#">Sample Fashion ProductA Configurable product offers</a></header>
                            <p> which are selected from drop-down lists...</p>
                        </div><!--End .reduced-->
                        <a href="#" class="btn_readmore">Chi tiết</a>
                        <span class="price">200K</span>
                    </div><!--End .module_item-->
                </section><!--End .module-->
                <div class="clear"></div>
            </div>


            <div class="clear"></div>
            <div class="text_center">
                <button class="btn_showmore">Xem thêm</button>
            </div>

        </section><!--End #content-->

        <section  class="slide-infomation">
            <ul id="mycarousel" class="jcarousel-skin-tango">
                <li>
                    <a href="#"><img src="uploads/1.png" title="" alt="1" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/2.png" title="" alt="2" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/3.png" title="" alt="3" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/1.png" title="" alt="1" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/2.png" title="" alt="2" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/3.png" title="" alt="3" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/1.png" title="" alt="1" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/2.png" title="" alt="2" ></a>
                </li>
                <li>
                    <a href="#"><img src="uploads/3.png" title="" alt="3" ></a>
                </li>
            </ul>
        </section> <!-- end .slide-infomation -->
        <script type="text/javascript" src="js/jquery.jcarousel.js"></script>
        <script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
        <script type="text/javascript" src="js/gallery.js"></script>

        <div id="footer" class="bg_back"> 
            <footer class="wrap">
                <div class="col floatLeft">
                    <div class="footerlink">
                        <h2>Giới thiệu</h2>
                        <ul>
                            <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has dummy text ever since the ...</li>
                        </ul>
                        <a href="#" class="readmore">Read More</a>
                    </div><!-- .End footerlink-->
                </div><!-- .End col-->
                <div class="col floatLeft">
                    <div class="footerlink">
                        <h2>Liên hệ</h2>
                        <div class="maps_contact">
                            <ul>
                                <li>The Company Name</li>
                                <li><img src="images/icon_maps.png"/>DC 999 E Street, N.W.. Washington, DC</li>
                                <li><img src="images/mail.png"/>1800-555-3838</li>
                                <li><img src="images/phone.png"/>info@yourstore.com</li>
                            </ul>
                        </div>
                    </div>
                </div><!-- .End col-->
                <div class="col floatLeft">
                    <div class="footerlink">
                        <h2>Thông tin</h2>
                        <div class="maps_contact">
                            <ul>
                                <li><a href="#">Customer Support</a></li>
                                <li><a href="#">Delivery Information</a></li>
                                <li><a href="#">Terms & Conditions</a></li>
                            </ul>
                        </div>
                    </div>
                </div><!-- .End col-->
                <div class="col floatLeft">
                    <div class="footerlink">
                        <h2>Thanh toán</h2>
                        <figure class="img_paypal">
                            <img src="uploads/paypal.png" alt="01"/>
                        </figure>
                        <p>It is a long established fact that a reader will be .distracted by the readable content of a page when looking at its layout. </p>
                    </div>
                </div><!-- .End col-->
                <div class="clear"></div>

                <div class="copyright_social">
                    <div class="floatLeft copyright">
                        <p >© Copyright 2013 1price</p>
                    </div>
                    <div class="social floatRight">
                        <a href="#"><img src="uploads/skype.png" alt=""></a>
                        <a href="#"><img src="uploads/ff.png" alt=""></a>
                        <a href="#"><img src="uploads/gg.png" alt=""></a>
                        <a href="#"><img src="uploads/tw.png" alt=""></a>
                    </div><!-- .End social-->
                    <div class="clear"></div>
                </div>
            </footer><!-- .End wrap-->
        </div><!-- #End footer -->
        <script src="js/idangerous.swiper-2.0.min.js"></script>
        <script src="js/idangerous.swiper.3dflow-2.0.js"></script>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                loop: true,
                //Enable 3D Flow
                tdFlow: {
                    rotate: 30,
                    stretch: 10,
                    depth: 150,
                    modifier: 1,
                    shadows: true
                }
            })
        </script>
    </body>
</html>








